<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.png" type="image/png">
    <title>超市订单管理系统V1.0</title>
    <link href="css/style.default.css" rel="stylesheet">
    <link href="css/jquery.datatables.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
    </div>
    <section id="supplierVue">
        <div class="leftpanel">
            <div class="logopanel">
                <h4>超市订单管理系统</h4>
            </div>
            <!-- logopanel -->
            <div class="leftpanelinner">
                <!-- This is only visible to small devices -->
                <div class="visible-xs hidden-sm hidden-md hidden-lg">
                    <div class="media userlogged">
                        <img alt="" src="images/photos/loggeduser.png" class="media-object">
                        <div class="media-body">
                            <h4>John Doe</h4>
                            <span>"Life is so..."</span>
                        </div>
                    </div>
                    <h5 class="sidebartitle actitle">Account</h5>
                    <ul class="nav nav-pills nav-stacked nav-bracket mb30">
                        <li><a href="profile.html"><i class="fa fa-user"></i> <span>Profile</span></a></li>
                        <li><a href="signout.html"><i class="fa fa-sign-out"></i> <span>Sign Out</span></a></li>
                    </ul>
                </div>
                <h5 class="sidebartitle">功能选项</h5>
                <ul class="nav nav-pills nav-stacked nav-bracket">
                    <li><a href="index.html"><i class="fa fa-home"></i> <span>主页</span></a></li>
                    <li><a href="add-userIndex.html"><i class="fa fa-user"></i> <span>员工管理</span></a></li>
                    <li class="active"><a href="add-supplierIndex.html"><i class="fa fa-male"></i> <span>供应商管理</span></a></li>
                    <li><a href="add-orderIndex.html"><i class="fa fa-book"></i> <span>订单管理</span></a></li>
                    <li><a href="recycle.html"><i class="fa fa-recycle"></i> <span>回收站</span></a></li>
                </ul>
                <div class="infosummary">
                    <h5 class="sidebartitle">Information Summary</h5>
                    <ul>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Daily Traffic</span>
                                <h4>630, 201</h4>
                            </div>
                            <div id="sidebar-chart" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Average Users</span>
                                <h4>1, 332, 801</h4>
                            </div>
                            <div id="sidebar-chart2" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Disk Usage</span>
                                <h4>82.2%</h4>
                            </div>
                            <div id="sidebar-chart3" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">CPU Usage</span>
                                <h4>140.05 - 32</h4>
                            </div>
                            <div id="sidebar-chart4" class="chart"></div>
                        </li>
                        <li>
                            <div class="datainfo">
                                <span class="text-muted">Memory Usage</span>
                                <h4>32.2%</h4>
                            </div>
                            <div id="sidebar-chart5" class="chart"></div>
                        </li>
                    </ul>
                </div>
                <!-- infosummary -->
            </div>
            <!-- leftpanelinner -->
        </div>
        <div class="mainpanel">
            <div class="headerbar">
                <a class="menutoggle"><i class="fa fa-bars"></i></a>
                <div class="header-right">
                    <ul class="headermenu">
                        <li>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <img src="images/photos/loggeduser.png" alt="" /> John Doe
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                                    <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
                                    <li><a href="signin.html"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li>
                                </ul>
                            </div>
                        </li>
                        
                    </ul>
                </div>
                <!-- header-right -->
            </div>
            <!-- headerbar -->
            <!-- headerbar -->
            <div class="pageheader">
                <h2><i class="fa fa-male"></i>主页<span>供应商管理</span></h2>
                <div class="breadcrumb-wrapper">
                    <span class="label">当前页</span>
                    <ol class="breadcrumb">
                        <li><a href="index.html">管理系统</a></li>
                        <li class="active">供应商管理</li>
                    </ol>
                </div>
            </div>
            <div class="contentpanel">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-close">&times;</a>
                            <a href="" class="minimize">&minus;</a>
                        </div>
                        <!-- panel-btns -->
                        <h3 class="panel-title">供应商信息</h3>
                        <p>以下是所有供应商的信息，可对供应商的信息进行编辑、删除和查看</p>
                        <div  class="col-md-6 input-group" style="width: 300px; padding-top: 10px;">
                            <input v-model="searchTxtSupplier" type="text"  class="form-control">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                         </div>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>供应商id</th>
                                        <th>供应商名称</th>
                                        <th>供应商联系人</th>
                                        <th>联系人手机</th>
                                        <th>提供的商品详情</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                     <tr v-for="item in supplierList | filterBy searchTxtSupplier" >

                                   

                                        <td>
                                            <div class="content">{{item.supplierId}}
                                                <input v-model="editSupplier.supplierId" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="content">{{item.supplierName}}
                                                <input v-model="editSupplier.supplierName" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="content">{{item.manager.name}}
                                                <input v-model="editSupplier.managerName" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                            </div>
                                        </td>     
                                        
                                        <td>
                                            <div class="content">{{item.manager.telephone}}
                                                <input v-model="editSupplier.managerTelephone" type="text" v-if="item.supplierId==nowEditCol" style="margin-left: -2px;margin-top: 5px;">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="content"> <a href="#" v-on:click="checkOneSupplierGoods(item.supplierId)" data-toggle="modal" data-target=".supplierGoodsDetails" >点击查看</a>
                                                <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol"  style="margin-left: -2px;margin-top: 5px;">
                                            </div>
                                        </td>
                                        <td class="table-action">
                                           <a href="javascript:void(0);" v-on:click="startEdit(item.supplierId)" v-if="item.supplierId!=nowEditCol"><i class="fa fa-pencil"></i></a>
                                           <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.supplierId==nowEditCol"><i class="fa fa-times"></i></a>
                                           <a href="javascript:void(0);" v-on:click="sureEdit(item.supplierId)" v-if="item.supplierId==nowEditCol"><i class="fa fa-check"></i></a>
                                        
                                        
                                           <a title="删除" href="javascript:void(0);" v-on:click="deleteSupplier(item.supplierId)" ><i class="fa fa-trash-o"></i></a>
                                           <a title="查看详情" class="details"  data-toggle="modal" data-target=".supplierDetails" v-on:click="checkOneSupplier(item.supplierId)"><i class="fa fa-list" ></i></a>
                                        </td>
                                    </tr>
                                   
                                </tbody>
                            </table>
                        </div>
                        <!-- table-responsive -->
                        <a class="btn btn-primary" href="add-supplier.html">新增供应商</a>
                    </div>
                    <!-- panel-body -->
                </div>
                <!-- panel -->
            </div>
            <!-- contentpanel -->
        </div>
        <!-- mainpanel -->

        <!--供应商详情的modal模态框-->
        <div class="modal fade supplierDetails" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="static" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">供应商信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-9">
                                <form id="basicForm" action="form-validation.html" class="form-horizontal">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商id<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.id}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商名称<span class="asterisk">*</span></label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.name}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商地址</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.address}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商手机</label>
                                                <div class="col-sm-9">
                                                    <h5>{{checkOneList.telephone}}</h5>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">供应商简介</label>
                                                <div class="col-sm-9">
                                                    <h5>{{}}</h5>
                                                </div>
                                            </div>


                                        </div>
                                        <!-- panel-body -->
                                    </div>
                                    <!-- panel -->
                                </form>
                            </div>
                            <!-- col-md-9 -->
                            <div class="col-md-3">
                                <img src="images/uploadfile.png" alt="" style="width: 120px; height: 120px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--供应商提供的商品详情的modal模态框-->
        <div class="modal fade supplierGoodsDetails" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">提供的物品详情</h4>
                        <div  class="col-md-6 input-group" style="width: 300px; padding-top: 10px;">
                            <input v-model="searchTxtSupplierGoods" type="text"  class="form-control">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                        </div>
                    </div>
                    <div class="modal-body" >

                            <table class="table">
                                <thead>
                                <tr>
                                    <th>商品图</th>
                                    <th>供应商id</th>
                                    <th>供应商名称</th>
                                    <th>商品id</th>
                                    <th>商品名称</th>
                                    <th>商品种类</th>
                                    <th>商品数量</th>
                                    <th>商品价格</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr v-for="item in goodsListBySupplier | filterBy searchTxtSupplierGoods" >

                                    <td>
                                        <div class="content">
                                            <img src="images/jdb.jpg" alt="" style="width:100px;height: 100px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.supplierId}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.supplierName}}

                                        </div>
                                    </td>
                                    <td>
                                        <div class="content">{{item.goodsId}}
                                            <input v-model="editUser.gender" type="text" v-if="item.id==nowEditCol" style="width:60px; margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.goodsName}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="width:60px; margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.classification}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="width:60px; margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.number}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="width:60px; margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>

                                    <td>
                                        <div class="content">{{item.goodsPrice}}
                                            <input v-model="editUser.address" type="text" v-if="item.id==nowEditCol" style="width:60px; margin-left: -2px;margin-top: 5px;">
                                        </div>
                                    </td>



                                    <td class="table-action">
                                        <a href="javascript:void(0);" v-on:click="startEdit(item.id)" v-if="item.id!=nowEditCol"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.id==nowEditCol"><i class="fa fa-times"></i></a>
                                        <a href="javascript:void(0);" v-on:click="sureEdit(item.id)" v-if="item.id==nowEditCol"><i class="fa fa-check"></i></a>


                                        <a title="删除" href="javascript:void(0);" v-on:click="deleteUser(item.id)" ><i class="fa fa-trash-o"></i></a>

                                    </td>
                                </tr>

                                </tbody>
                            </table>

                    </div>
                </div>
            </div>
        </div>

        <!--modal模态框结束-->


       
    </section>

    <div class="footer" style="text-align: center;">
        &copy; 2018. All Rights Reserved. 超市订单管理系统
    </div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.sparkline.min.js"></script>
    <script src="js/toggles.min.js"></script>
    <script src="js/retina.min.js"></script>
    <script src="js/jquery.cookies.js"></script>
    <script src="js/jquery.datatables.min.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/vue1.0.js"></script>
    <script src="js/vueJs/mainFunc.js"></script>
    <script>
        jQuery(document).ready(function() { 

            supplier.checkAllSupplier();

        });

    jQuery(document).ready(function() {

        "use strict";

 
        // Select2
        jQuery('select').select2({
            minimumResultsForSearch: -1
        });

        jQuery('select').removeClass('form-control');

        // Delete row in a table
        jQuery('.delete-row').click(function() {
            var c = confirm("Continue delete?");
            if (c)
                jQuery(this).closest('tr').fadeOut(function() {
                    jQuery(this).remove();
                });

            return false;
        });

        // Show aciton upon row hover
        jQuery('.table-hidaction tbody tr').hover(function() {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 1 });
        }, function() {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 0 });
        });


    });
    </script>
</body>

</html>